<template>
  <div class="detail_container">
    <div class="close" @click="goBack">
      <CloseView @close="goBack" :size="18" />
    </div>
    <div class="content">
      <div class="detail_view">
        <div class="left">
          <div class="left_img_view" id="left_img_view">
            <!--            <img-->
            <!--              id="img_box"-->
            <!--              v-if="imageDetail.thumbnail"-->
            <!--              class="img_big"-->
            <!--              :src="imageDetail.thumbnail.url"-->
            <!--              alt="" />-->
          </div>
          <div class="price_view">
            <Nex
              v-if="imageDetail.enable_nex === 0"
              :nexDetail="nexDetail"
              @refreshNexDetail="refreshNexDetail" />
            <div
              class="price_num"
              v-else-if="imageDetail.enable_nex === 1 && imageDetail?.product?.status === 2">
              <span class="fs_22">$</span>
              <span>{{ imageDetail?.product?.pre_price }}</span>
              <div
                v-hover-gradient
                class="price_btn cursor_poi"
                @click="buyNow(imageDetail?.product)">
                <span>
                  {{
                    imageDetail?.product?.status === 1
                      ? 'Pre - order'
                      : imageDetail?.product?.status === 2
                      ? 'Buy Now'
                      : ''
                  }}
                </span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="25"
                  height="24"
                  viewBox="0 0 25 24"
                  fill="none">
                  <path
                    d="M21.0954 8.13393C20.9671 8.00057 20.8144 7.89482 20.6462 7.82278C20.4779 7.75075 20.2975 7.71387 20.1154 7.71429H17.3461V7C17.3461 5.67392 16.8356 4.40215 15.9267 3.46447C15.0179 2.52678 13.7853 2 12.5 2C11.2147 2 9.98208 2.52678 9.07325 3.46447C8.16442 4.40215 7.65384 5.67392 7.65384 7V7.71429H4.88461C4.51739 7.71429 4.16521 7.8648 3.90554 8.13271C3.64588 8.40061 3.5 8.76398 3.5 9.14286V18.7857C3.5 20.5268 4.92788 22 6.61538 22H18.3846C19.2009 22.0003 19.9848 21.671 20.5688 21.0826C20.8627 20.7933 21.0968 20.4456 21.2568 20.0604C21.4168 19.6752 21.4996 19.2606 21.5 18.8415V9.14286C21.5006 8.95544 21.4651 8.76977 21.3956 8.59659C21.3262 8.42341 21.2242 8.26615 21.0954 8.13393ZM9.03846 7C9.03846 6.0528 9.40316 5.14439 10.0523 4.47462C10.7015 3.80485 11.5819 3.42857 12.5 3.42857C13.4181 3.42857 14.2985 3.80485 14.9477 4.47462C15.5968 5.14439 15.9615 6.0528 15.9615 7V7.71429H9.03846V7ZM17.3461 11.2857C17.3461 12.6118 16.8356 13.8836 15.9267 14.8212C15.0179 15.7589 13.7853 16.2857 12.5 16.2857C11.2147 16.2857 9.98208 15.7589 9.07325 14.8212C8.16442 13.8836 7.65384 12.6118 7.65384 11.2857V10.5714C7.65384 10.382 7.72678 10.2003 7.85662 10.0664C7.98645 9.9324 8.16254 9.85714 8.34615 9.85714C8.52976 9.85714 8.70585 9.9324 8.83569 10.0664C8.96552 10.2003 9.03846 10.382 9.03846 10.5714V11.2857C9.03846 12.2329 9.40316 13.1413 10.0523 13.8111C10.7015 14.4809 11.5819 14.8571 12.5 14.8571C13.4181 14.8571 14.2985 14.4809 14.9477 13.8111C15.5968 13.1413 15.9615 12.2329 15.9615 11.2857V10.5714C15.9615 10.382 16.0345 10.2003 16.1643 10.0664C16.2941 9.9324 16.4702 9.85714 16.6538 9.85714C16.8375 9.85714 17.0135 9.9324 17.1434 10.0664C17.2732 10.2003 17.3461 10.382 17.3461 10.5714V11.2857Z"
                    fill="white" />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="right pl-[32px]">
          <ul
            :infinite-scroll-immediate="false"
            infinite-scroll-distance="20"
            v-infinite-scroll="getCommentList"
            class="infinite-list"
            style="overflow: auto">
            <div class="flex_row">
              <div class="flex_row w_100">
                <div class="title_view cursor-pointer" @click="goProfile">
                  <img
                    v-if="imageDetail.user"
                    class="img_avt"
                    :src="imageDetail.user?.avatar"
                    alt="" />
                  <div class="title">
                    <span>
                      {{ imageDetail.user?.name }}
                    </span>
                  </div>
                </div>
                <div
                  v-if="imageDetail?.user"
                  class="title cursor_poi"
                  @click="throttleFollowAuthor(imageDetail?.user?.follow_flag)">
                  <div
                    v-if="imageDetail?.user?.follow_flag === 1"
                    v-hover-bg="{
                      enterColor: '#F9D9C7',
                      leaveColor: '#fbe6db',
                    }"
                    class="cancal_follow">
                    Following
                  </div>
                  <div v-else class="follow" v-hover-bg>Follow</div>
                </div>
              </div>
            </div>
            <div class="mt-[24px]">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="584"
                height="2"
                viewBox="0 0 584 2"
                fill="none">
                <path d="M0 1H584" stroke="#EDEDED" stroke-width="0.5" />
              </svg>
            </div>
            <div class="mt-[20px] img_title">{{ imageDetail.title }}</div>
            <div v-if="imageDetail?.tags?.length > 0" class="mt-[8px]">
              <span
                v-slide-underline
                @click.stop="handleTagClick(item)"
                class="name line mr-[8px]"
                :key="item.name"
                v-for="item in imageDetail.tags">
                # {{ item.name }}
              </span>
            </div>
            <div class="name_des mt-[8px]">{{ imageDetail.caption }}</div>
            <div v-if="imageDetail.prompt_text" class="mt-[8px]" @click="operation(6)">
              <el-tooltip class="box-item" effect="dark" content="Copy" placement="top">
                <span class="name line" v-slide-underline>Prompt</span>
              </el-tooltip>
            </div>
            <div class="text-container name_des mt-[4px]">
              <div class="text-content">
                {{ imageDetail.prompt_text }}
              </div>
              <div v-if="showToggleBtn" @click="toggleButton" class="toggle-btn">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none">
                  <path d="M2 5L8 11L14 5" stroke="#222222" stroke-width="1.6" />
                  <path d="M2 5L8 11L14 5" stroke="black" stroke-opacity="0.2" stroke-width="1.6" />
                  <path d="M2 5L8 11L14 5" stroke="black" stroke-opacity="0.2" stroke-width="1.6" />
                  <path d="M2 5L8 11L14 5" stroke="black" stroke-opacity="0.2" stroke-width="1.6" />
                  <path d="M2 5L8 11L14 5" stroke="black" stroke-opacity="0.2" stroke-width="1.6" />
                </svg>
              </div>
            </div>
            <div v-if="imageDetail.counter" class="flex_row mt-[8px] icon_view">
              <div class="icon_list">
                <!--                <VoteIcon-->
                <!--                  @click.stop="handleVote(imageDetail)"-->
                <!--                  class="cursor-pointer"-->
                <!--                  :color="imageDetail.is_vote === 1 ? '#F76B1B' : '#CBCBCB'" />-->
                <!--                <span class="ml-[2px] mr-[24px]">-->
                <!--                  {{ imageDetail.counter?.vote_count || 0 }}-->
                <!--                </span>-->
                <svg
                  v-like-pulse
                  class="cursor_poi like-icon"
                  @click="sendLike(imageDetail.like_flag)"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M12.0005 21C11.6994 20.9996 11.4054 20.9086 11.1568 20.7389C7.47286 18.2381 5.87771 16.5234 4.99786 15.4514C3.12286 13.1663 2.22521 10.8202 2.25052 8.27953C2.28005 5.36813 4.61583 3 7.4574 3C9.52365 3 10.9547 4.16391 11.7882 5.13328C11.8146 5.16368 11.8472 5.18805 11.8838 5.20476C11.9205 5.22146 11.9603 5.23011 12.0005 5.23011C12.0408 5.23011 12.0806 5.22146 12.1172 5.20476C12.1538 5.18805 12.1865 5.16368 12.2129 5.13328C13.0463 4.16297 14.4774 3 16.5436 3C19.3852 3 21.721 5.36812 21.7505 8.28C21.7758 10.8211 20.8772 13.1672 19.0032 15.4519C18.1233 16.5239 16.5282 18.2386 12.8443 20.7394C12.5955 20.9089 12.3016 20.9998 12.0005 21Z"
                    :fill="imageDetail.like_flag === 1 ? '#FF4D4F' : '#CBCBCB'" />
                </svg>
                <span class="ml-[2px] mr-[24px]">
                  {{ imageDetail.counter?.like_count || 0 }}
                </span>
                <svg
                  v-svg-hover
                  @click="focusComment"
                  class="base_svg_color cursor-pointer"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    d="M17.7054 5.0025C16.084 3.70526 14.0692 2.99898 11.9928 3C9.54512 3 7.25896 3.94299 5.54977 5.6554C3.89803 7.31237 2.99281 9.50009 3.00004 11.814C3.0001 13.5104 3.49814 15.1696 4.43241 16.5856L4.44004 16.5964C4.45129 16.6129 4.46294 16.6294 4.47459 16.6454C4.48624 16.6615 4.50071 16.6824 4.50392 16.6876L4.51276 16.7037C4.55816 16.7841 4.59312 16.8821 4.56218 16.9809L3.82209 19.6592C3.79249 19.7588 3.77627 19.8619 3.77388 19.9658C3.77335 20.2391 3.8812 20.5014 4.07378 20.6953C4.26637 20.8891 4.52798 20.9987 4.80124 21C4.94564 20.9952 5.08795 20.964 5.22111 20.908L7.93275 19.9292L7.96691 19.916C8.04067 19.885 8.11994 19.8693 8.19994 19.8698C8.2737 19.87 8.34682 19.8836 8.4157 19.91C8.48079 19.9353 9.07181 20.1615 9.69538 20.3358C10.2137 20.4805 11.2921 20.6975 12.137 20.6975C14.5337 20.6975 16.7716 19.7693 18.4382 18.0834C20.0904 16.4104 21 14.1865 21 11.8188C21.0002 11.211 20.9358 10.6049 20.8079 10.0108C20.3925 8.05728 19.2908 6.27817 17.7054 5.0025ZM8.14289 13.2857C7.8886 13.2857 7.64002 13.2103 7.42859 13.069C7.21715 12.9278 7.05236 12.727 6.95505 12.492C6.85773 12.2571 6.83227 11.9986 6.88188 11.7492C6.93149 11.4998 7.05394 11.2707 7.23375 11.0909C7.41356 10.9111 7.64265 10.7886 7.89206 10.739C8.14146 10.6894 8.39997 10.7148 8.63491 10.8122C8.86984 10.9095 9.07064 11.0743 9.21192 11.2857C9.35319 11.4971 9.4286 11.7457 9.4286 12C9.4286 12.341 9.29314 12.668 9.05202 12.9091C8.8109 13.1503 8.48388 13.2857 8.14289 13.2857ZM12 13.2857C11.7457 13.2857 11.4972 13.2103 11.2857 13.069C11.0743 12.9278 10.9095 12.727 10.8122 12.492C10.7149 12.2571 10.6894 11.9986 10.739 11.7492C10.7886 11.4998 10.9111 11.2707 11.0909 11.0909C11.2707 10.9111 11.4998 10.7886 11.7492 10.739C11.9986 10.6894 12.2571 10.7148 12.492 10.8122C12.727 10.9095 12.9278 11.0743 13.0691 11.2857C13.2103 11.4971 13.2857 11.7457 13.2857 12C13.2857 12.341 13.1503 12.668 12.9092 12.9091C12.668 13.1503 12.341 13.2857 12 13.2857ZM15.8572 13.2857C15.6029 13.2857 15.3543 13.2103 15.1429 13.069C14.9314 12.9278 14.7666 12.727 14.6693 12.492C14.572 12.2571 14.5465 11.9986 14.5961 11.7492C14.6458 11.4998 14.7682 11.2707 14.948 11.0909C15.1278 10.9111 15.3569 10.7886 15.6063 10.739C15.8557 10.6894 16.1142 10.7148 16.3492 10.8122C16.5841 10.9095 16.7849 11.0743 16.9262 11.2857C17.0675 11.4971 17.1429 11.7457 17.1429 12C17.1429 12.341 17.0074 12.668 16.7663 12.9091C16.5252 13.1503 16.1981 13.2857 15.8572 13.2857Z" />
                </svg>
                <span class="ml-[2px] mr-[24px]">
                  {{ imageDetail.counter?.comment_count || 0 }}
                </span>
                <el-tooltip class="box-item" effect="dark" content="Share" placement="top">
                  <div class="flex_row">
                    <svg
                      v-svg-hover
                      class="base_svg_color cursor-pointer"
                      @click="operation(4)"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M2.75578 20.5842C2.60813 20.5333 2.48004 20.4376 2.38937 20.3105C2.2987 20.1834 2.24998 20.0311 2.25 19.8749C2.25 16.4484 2.93813 13.7081 4.29609 11.7295C5.93672 9.33884 8.52469 8.05165 12 7.89181V4.12493C12 3.97808 12.0431 3.83445 12.124 3.71188C12.2049 3.58931 12.32 3.49318 12.4551 3.43543C12.5901 3.37768 12.7391 3.36084 12.8836 3.387C13.0281 3.41316 13.1618 3.48117 13.268 3.58259L21.518 11.4576C21.5913 11.5276 21.6496 11.6118 21.6895 11.705C21.7294 11.7982 21.7499 11.8986 21.7499 11.9999C21.7499 12.1013 21.7294 12.2017 21.6895 12.2949C21.6496 12.3881 21.5913 12.4723 21.518 12.5423L13.268 20.4173C13.1618 20.5187 13.0281 20.5867 12.8836 20.6129C12.7391 20.639 12.5901 20.6222 12.4551 20.5644C12.32 20.5067 12.2049 20.4106 12.124 20.288C12.0431 20.1654 12 20.0218 12 19.8749V16.1357C9.89062 16.1995 8.29687 16.5412 7.02797 17.197C5.65687 17.9057 4.66266 18.9646 3.59109 20.3376C3.49496 20.4607 3.3628 20.5507 3.21306 20.5951C3.06331 20.6394 2.90345 20.6359 2.75578 20.5851V20.5842Z" />
                    </svg>
                    <!--   <span class="ml-[2px]">{{ imageDetail.counter?.share_count || 0 }}</span>-->
                  </div>
                </el-tooltip>
              </div>
              <el-popover placement="bottom" popper-style="box-sizing: border-box;z-index:99999">
                <template #reference>
                  <div class="more_operation">
                    <div v-for="item in 3">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="4"
                        height="4"
                        viewBox="0 0 4 4"
                        fill="none">
                        <circle cx="2" cy="2" r="1.5" fill="#222222" />
                      </svg>
                    </div>
                  </div>
                </template>
                <div class="pt-[5px]">
                  <!--                  <div @click="operation(1)" class="operation_item">Copy</div>-->
                  <div @click="operation(2)" class="operation_item">Download</div>
                  <div @click="operation(5)" class="operation_item">Report</div>
                  <div
                    v-if="imageDetail?.user?.uid === userInfo?.uid"
                    @click="operation(3)"
                    class="operation_item"
                    style="color: #cbcbcb">
                    Delete
                  </div>
                </div>
              </el-popover>
            </div>
            <div class="mt-[24px]">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="584"
                height="2"
                viewBox="0 0 584 2"
                fill="none">
                <path d="M0 1H584" stroke="#EDEDED" stroke-width="0.5" />
              </svg>
            </div>
            <div class="mt-[24px]">
              <Reply
                :commentNum="commentNum"
                :showCommentNum="true"
                ref="replyRef"
                @postComment="postComment" />
            </div>
            <div v-for="(item, index) in commentList" :key="item.comment_id" class="mt-[24px]">
              <div v-if="item.user" class="user_info">
                <img class="user_avt" :src="item.user.avatar" alt="" />
                <span class="user_name ml-[4px]">{{ item.user.name }}</span>
              </div>
              <div class="comment_view">
                <div class="comment_view_text">
                  {{ item.content }}
                </div>
                <div class="comment_img_list" v-if="item.imgs && item.imgs.length > 0">
                  <div
                    class="comment_img_view cursor_poi"
                    v-for="(imgItem, imgIndex) in item.imgs"
                    @click="showImg(item.imgs, imgIndex)"
                    :key="imgItem">
                    <img class="comment_img" :src="imgItem" alt="" />
                  </div>
                </div>
                <div class="mt-[4px]">
                  <span class="comment_time flex_row_no_s">
                    {{ item.created_at }}
                    <div
                      v-slide-underline
                      @click="showReplyInput(item)"
                      class="cursor_poi reply_btn ml-[8px] base_line">
                      {{
                        item.comment_id === nowReplyItem.comment_id && nowReplyItem.isShowReply
                          ? 'Cancel'
                          : 'Reply'
                      }}
                    </div>
                    <div
                      v-slide-underline
                      v-if="item.self_comment_flag"
                      @click="deleteComment(item, index)"
                      class="cursor_poi reply_btn ml-[8px] base_line">
                      Delete
                    </div>
                  </span>
                </div>
              </div>
              <div v-if="item.reply_flag === 1">
                <block v-if="item.reply && item.reply.length > 0">
                  <div
                    :key="rItem.comment_id"
                    v-for="(rItem, cIndex) in item.reply"
                    class="reply_view mt-[8px] ml-[24px]">
                    <div v-if="rItem.user" class="user_info">
                      <img class="user_avt" :src="rItem?.user?.avatar" alt="" />
                      <span class="user_name ml-[4px]">{{ rItem?.user?.name }}</span>
                    </div>
                    <div class="comment_view">
                      <span>
                        {{ rItem.content }}
                      </span>
                      <div class="mt-[4px]">
                        <span class="comment_time flex_row_no_s">
                          {{ rItem.created_at }}
                          <div
                            v-slide-underline
                            @click="showReplyInput(rItem, true)"
                            class="cursor_poi reply_btn ml-[8px] base_line">
                            {{
                              rItem.comment_id == nowReplyItem.comment_id &&
                              nowReplyItem.isShowReply
                                ? 'Cancel'
                                : 'Reply'
                            }}
                          </div>
                          <div
                            v-slide-underline
                            v-if="rItem.self_comment_flag"
                            @click="deleteComment(rItem, index, true)"
                            class="cursor_poi reply_btn ml-[8px] base_line">
                            Delete
                          </div>
                        </span>
                      </div>
                    </div>
                  </div>
                </block>
                <span class="show_more_text cursor_poi" @click="showChildReply(item, index)">
                  <span v-slide-underline class="base_line">
                    {{ item.showMoreChildReply ? 'Show less' : 'Show more' }}
                  </span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="17"
                    height="17"
                    viewBox="0 0 17 17"
                    fill="none">
                    <path
                      :d="
                        item.showMoreChildReply ? 'M3.5 11L8.5 6L13.5 11' : 'M3.5 6L8.5 11L13.5 6'
                      "
                      stroke="black" />
                  </svg>
                </span>
              </div>
              <block v-show="item.isShowReply">
                <Reply
                  :isCanUpImg="false"
                  :ref="
                    (el) => {
                      if (el) childRefs[item.comment_id || index] = el;
                    }
                  "
                  @postComment="postComment"
                  :replyItem="nowReplyItem"
                  :placeholder="replyPlaceholder" />
              </block>
            </div>
            <NoComment v-if="!hasMore && commentList?.length === 0" />
          </ul>
        </div>
      </div>
    </div>

    <el-image-viewer
      v-if="previewImg.showPreview"
      :url-list="previewImg.img"
      show-progress
      :initial-index="previewImg.initialIndex"
      :hide-on-click-modal="true"
      @close="previewImg.showPreview = false" />

    <!--举报作品弹框-->
    <el-dialog v-model="dialogVisibleReport" width="560" :show-close="false">
      <div class="report_view_dialog">
        <img class="waring_img" src="@/assets/detail/waring.png" alt="" />
        <div class="input_dialog">Reason *</div>
        <el-select
          class="mt-[8px]"
          v-model="reportInfo.reason"
          placeholder="Please select the reason">
          <el-option
            v-for="item in reportList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <div class="flex_row" style="height: 100%">
              <div :class="item.value === reportInfo.reason ? 'active_item_label' : 'item_label'">
                {{ item.label }}
              </div>
              <svg
                v-if="item.value === reportInfo.reason"
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none">
                <path
                  d="M1 7L6 12L15 3"
                  stroke="#F76B1B"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </div>
          </el-option>
        </el-select>
        <div class="input_dialog mt-[16px]">Description *</div>
        <el-input
          v-model="reportInfo.description"
          maxlength="500"
          :rows="6"
          show-word-limit
          :autosize="false"
          type="textarea"
          resize="none"
          class="reportInfo-scrollbar-textarea mt-[8px]"
          placeholder="Description" />
        <div class="flex_row mt-[40px]">
          <div class="cancle_btn cursor_poi" @click="dialogVisibleReport = false">Cancel</div>
          <div v-hover-gradient class="confirm_btn cursor_poi" @click="sendReport">Submit</div>
        </div>
        <div class="dialog_right" @click="dialogVisibleReport = false">
          <CloseView @close="dialogVisibleReport = false" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus';
  import Reply from '@/views/detail/components/Reply.vue';
  import Nex from '@/views/detail/components/Nex.vue';
  import NoComment from '@/views/detail/components/NoComment.vue';
  import CloseView from '@/components/Close.vue';
  import VoteIcon from '@/components/feed/icons/VoteIcon.vue';
  import { useRouter, useRoute } from 'vue-router';
  import { FeedItem, FeedsAPI, FeedsParams, PreviewImage } from '@/api/feeds';
  import { NexAPI, NexInfo, NexParams, OrderType } from '@/api/nex';
  import { CommentAPI, CommentItem, commentParams } from '@/api/comment';
  import { PayAPI } from '@/api/pay';
  import { onMounted, reactive, ref, nextTick, onUnmounted, computed } from 'vue';
  import { downloadImage, getImageInfoByUrl, copyImageToClipboard } from '@/utils/tools';
  import { UserAPI } from '@/api/user';
  import { useUserStore } from '@/store/user';
  import { useOrderStore } from '@/store/order';
  import type { PaymentSuccessData, OrderStatus } from '@/types/pay';
  import { throttle } from 'lodash';
  import { bus, useBus } from '@/utils/bus';
  import { ActivityAPI } from '@/api/activity';
  const route: any = useRoute();
  const router = useRouter();
  const userStore = useUserStore();
  const orderStore = useOrderStore();
  const userInfo = computed(() => userStore.user);
  const replyRef: any = ref(null);
  const childRefs: any = ref({});
  const replyPlaceholder = ref<string>('');
  const loadStatus = ref<boolean>(false);
  const nextStart = ref<number>(0);
  const nextSize = ref<number>(30);
  const hasMore = ref<boolean>(true);
  const nowReplyItem = ref<any>({ isShowReply: false }); // 当前回复楼层

  // 使用全局订单状态（弹窗现在在App.vue中全局管理）
  const commentNum = ref<number>(0); // 评论数量
  const imageDetail = ref<any>({}); // 作品详情
  const commentList = ref<CommentItem[]>([]); // 评论列表
  const showToggleBtn = ref<boolean>(false); // prompt超出2行显示折叠
  // 图片预览
  const previewImg = ref<PreviewImage>({
    img: [],
    showPreview: false,
    initialIndex: 0,
  });
  const nexDetail = ref<NexInfo>({});
  const dialogVisibleReport = ref<boolean>(false);
  const reportInfo = ref<any>({});
  const reportList = ref<any>([
    { value: 'Latest', label: 'Latest' },
    { value: 'Prohibited / Unsafe Content', label: 'Prohibited / Unsafe Content' },
    { value: 'Quality & Safety Concerns', label: 'Quality & Safety Concerns' },
    { value: 'Platform Policy Violations', label: 'Platform Policy Violations' },
    { value: 'Ethical / Cultural Concerns', label: 'Ethical / Cultural Concerns' },
    { value: 'Others', label: 'Others' },
  ]);

  onMounted(async () => {
    await getDetail();
    getCommentList();
    checkTextOverflow();
    addEvenWin();
    // getNexDetail();

    // 检查是否有待支付的订单，如果有则恢复轮询
    orderStore.checkAndResumeOrderPolling();
  });

  onUnmounted(() => {
    window.removeEventListener('resize', resizeWindow);
    // 注意：不在这里清理订单轮询，因为它是全局的
    // 只有在支付成功/失败或超时时才会清理
  });

  const buyNow = async (product: any) => {
    const params = {
      product_id: product.product_id,
      quality: 1,
      pay_method: 1,
      feed_id: imageDetail.value?.feed_id,
      order_type: OrderType.PRODUCT,
    };
    orderStore.createOrderHandle(params);
  };

  // 支付成功弹窗现在由全局组件管理，无需本地处理

  // 举报作品
  const sendReport = async () => {
    const { feed_id } = route.query;
    const { description, reason } = reportInfo.value;
    if (!description || !reason) {
      ElMessage.warning('Please select reason and input description');
      return;
    }
    const params: FeedsParams = {
      description,
      reason,
      feed_id,
    };
    const res = await FeedsAPI.reportProduct(params);
    dialogVisibleReport.value = false;
    reportInfo.value = {};
  };

  // prompt文本区展开更多按钮
  const toggleButton = () => {
    const textContent = document.querySelector('.text-content') as HTMLParagraphElement | null;
    if (!textContent) return;
    showToggleBtn.value = false;
    textContent.style.webkitLineClamp = 'unset';
  };

  // 判断是否显示prompt文本区折叠按钮
  const checkTextOverflow = async () => {
    await nextTick();
    const textContent = document.querySelector('.text-content') as HTMLParagraphElement | null;
    if (!textContent) return;
    // 临时取消行数限制，获取文本实际高度
    textContent.style.webkitLineClamp = 'unset';
    const actualHeight = textContent.offsetHeight;
    // 恢复两行限制，获取两行高度
    textContent.style.webkitLineClamp = '2';
    const twoLineHeight = textContent.offsetHeight;
    // 实际高度 > 两行高度 → 显示折叠按钮
    showToggleBtn.value = actualHeight > twoLineHeight;
  };

  // 关注作者、取消关注
  const throttleFollowAuthor = throttle(async (follow: number) => {
    const { uid } = imageDetail.value?.user || {};
    const params = { to_id: uid };
    const isFollowing = follow === 1;
    imageDetail.value.user.follow_flag = isFollowing ? 0 : 1;
    follow === 1 ? await UserAPI.unfollowUser(params) : await UserAPI.followUser(params);
  }, 1000);

  const addEvenWin = () => {
    window.addEventListener('resize', resizeWindow);
  };

  const resizeWindow = () => {
    getImgViewHeight();
    checkTextOverflow();
  };

  // 设置
  const getImgViewHeight = async () => {
    await nextTick();
    const box: any = document.getElementById('left_img_view');
    const { url, height, width } = imageDetail.value.thumbnail || {};
    if (!url) return;
    if (!height || !width) {
      const imgInfo: any = await getImageInfoByUrl(url);
      imageDetail.value.thumbnail.height = imgInfo?.height;
      imageDetail.value.thumbnail.width = imgInfo?.width;
    }
    console.log('imgInfo', box?.clientHeight, box?.clientWidth, height, width);
    const img = document.createElement('img');
    img.src = url;
    if (height > width) {
      img.style.height = box?.clientHeight + 'px';
      img.style.width = 'auto';
    } else {
      img.style.width = box?.clientWidth + 'px';
      img.style.height = 'auto';
    }
    img.style.borderRadius = '6px';
    box.innerHTML = '';
    box.appendChild(img);
  };

  // 下载图片、复制图片、删除作品
  const operation = async (id: number) => {
    const { feed_id } = route.query;
    if (id === 1) {
      await copyImageToClipboard(imageDetail.value.thumbnail?.url);
      // await navigator.clipboard.writeText(imageDetail.value.thumbnail?.url);
      ElMessage.success('Copied to clipboard');
      return;
    }
    if (id === 2) {
      await downloadImage(imageDetail.value.thumbnail?.url);
      return;
    }
    if (id === 3) {
      const res = await ElMessageBox.confirm(`Confirm to delete this work?`);
      if (res === 'confirm') {
        await FeedsAPI.deleteFeed({ feed_id });
        goBack();
      }
      return;
    }
    if (id === 4) {
      const link = window.location.href;
      await navigator.clipboard.writeText(link);
      ElMessage.success('Copy link successfully');
      return;
    }
    // 举报
    if (id === 5) {
      dialogVisibleReport.value = true;
      return;
    }
    if (id === 6) {
      await navigator.clipboard.writeText(imageDetail.value.prompt_text);
      ElMessage.success('Copy successfully');
      return;
    }
  };

  // 展示楼中楼回复
  const showChildReply = async (item: CommentItem, index: number) => {
    const params = { comment_id: item.comment_id };
    const isShowMoreChildReply = commentList.value[index].showMoreChildReply;
    commentList.value[index].showMoreChildReply = !commentList.value[index].showMoreChildReply;
    if (!isShowMoreChildReply) {
      commentList.value[index].reply = (await CommentAPI.getReplyCommentList(params)) || [];
      return;
    }
    commentList.value[index].reply = [];
  };

  // 评论列表
  const getCommentList = async () => {
    if (loadStatus.value || !hasMore.value) return;
    const { feed_id } = route.query;
    const params: commentParams = {
      start: nextStart.value,
      size: nextSize.value,
      feed_id,
    };
    loadStatus.value = true;
    const { comments, has_more, next_start, next_size, total_comment } =
      (await CommentAPI.getCommentList(params)) || {};
    hasMore.value = has_more;
    nextStart.value = next_start;
    commentList.value = commentList.value.concat(comments || []);
    commentNum.value = total_comment;
    loadStatus.value = false;
  };

  // 添加删除评论通知首页刷新评论数量
  const emitRefreshCommentNum = async () => {
    const { feed_id } = route.query;
    const params: commentParams = {
      start: 0,
      size: 20,
      feed_id,
    };
    const { total_comment } = (await CommentAPI.getCommentList(params)) || {};
    bus.emit('detail:comment', { feed_id, total_comment });
    commentNum.value = total_comment;
    imageDetail.value.counter.comment_count = total_comment;
  };
  // 发布评论
  const postComment = async (mess: any) => {
    const { feed_id } = route.query;
    const { content, images, replyItem } = mess || {};
    const params: commentParams = {
      feed_id,
      content,
    };
    // 存在图片
    if (images?.length > 0) {
      params.imgs = images?.map((item: any) => item.url);
    }
    // 回复楼中楼场景
    if (replyItem?.comment_id) {
      params.reply_to_uid = replyItem.user?.uid;
      params.p_comment_id = replyItem.p_comment_id;
    }
    await CommentAPI.sendComment(params);
    // 刷新评论数量
    emitRefreshCommentNum();
    // 清空楼中楼回复输入框，重新加载该楼层所有回复
    if (replyItem?.comment_id) {
      childRefs.value[replyItem.p_comment_id].clear(); // 清空回复输入框
      const findIndex = commentList.value.findIndex(
        (item: CommentItem) => item.comment_id === replyItem.p_comment_id
      );
      const params = { comment_id: replyItem.p_comment_id };
      commentList.value[findIndex].reply = (await CommentAPI.getReplyCommentList(params)) || [];
      commentList.value[findIndex].isShowReply = false; // 隐藏子楼层回复框
      commentList.value[findIndex].showMoreChildReply = true; //展示子楼层回复
      commentList.value[findIndex].reply_flag = 1;
      nowReplyItem.value = {};
      return;
    }
    // 非评论楼中楼场景
    replyRef.value.clear();
    hasMore.value = true;
    nextStart.value = 0;
    commentList.value = [];
    nowReplyItem.value = {};
    await getCommentList();
  };

  // 删除评论
  const deleteComment = async (deleteItem: CommentItem, index: number, isChild?: boolean) => {
    const { comment_id } = deleteItem;
    const res = await CommentAPI.deleteCommentList({ comment_id });
    // 刷新评论数量
    emitRefreshCommentNum();
    // 删除楼层子级回复
    if (isChild) {
      const findIndex = commentList.value.findIndex(
        (item: CommentItem) => item.comment_id === deleteItem.p_comment_id
      );
      const params: commentParams = { comment_id: deleteItem.p_comment_id };
      const list = (await CommentAPI.getReplyCommentList(params)) || [];
      commentList.value[findIndex].reply = list;
      commentList.value[findIndex].showMoreChildReply = list.length > 0;
      commentList.value[findIndex].reply_flag = list.length > 0 ? 1 : 0;
      return;
    }
    // 删除主楼层回复
    commentList.value.splice(index, 1);
  };

  // 展示回复输入框
  const showReplyInput = (reply: CommentItem, isChildReply?: boolean) => {
    const { user } = reply;
    const { comment_id } = nowReplyItem.value;
    // 取消回复场景
    if (comment_id === reply.comment_id) {
      nowReplyItem.value = {};
      commentList.value?.forEach((item: CommentItem) => {
        item.isShowReply = false;
      });
      return;
    }
    commentList.value?.forEach((item: any) => {
      if (!isChildReply) {
        item.isShowReply = item?.comment_id === reply.comment_id;
        return;
      }
      if (isChildReply) {
        item.isShowReply = !!item?.reply?.find(
          (item: any) => item?.comment_id === reply?.comment_id
        );
      }
    });
    replyPlaceholder.value = `reply @${user?.name || ''}`;
    const flag = commentList.value?.find((item: CommentItem) => item?.isShowReply);
    const params = { ...reply, isShowReply: flag };
    // 记录楼中楼回复时父级楼层id
    if (!isChildReply) {
      params.p_comment_id = reply.comment_id;
    }
    nowReplyItem.value = params;
  };

  const getDetail = async () => {
    const { feed_id } = route.query;
    const { code, data } = (await FeedsAPI.getFeed({ feed_id })) || {};
    if (code === 200) {
      imageDetail.value = data;
    }
    getImgViewHeight();
    if (data?.enable_nex === 0) {
      await getNexDetail();
    }
  };

  const refreshNexDetail = async (type: 'NEX' | 'FINISH') => {
    // await getNexDetail();
    const params = {
      product_id: imageDetail.value?.product?.product_id,
      quality: 1,
      feed_id: imageDetail.value?.feed_id,
      pay_method: 1,
      order_type: type == 'NEX' ? OrderType.NEX : OrderType.NEX_SUCCESS,
    };
    orderStore.createOrderHandle(params);
  };

  // 获取nex详情
  const getNexDetail = async () => {
    const { feed_id } = route.query;
    const params: NexParams = { feed_id };
    const { code, data } = await NexAPI.getNexDetail(params);
    if (code === 200) {
      nexDetail.value = data;
    }
  };

  // 点赞、取消点赞
  const sendLike = async (isLike: number) => {
    try {
      const { feed_id } = route.query;
      const isLikeState = isLike === 1;
      imageDetail.value.like_flag = isLikeState ? 0 : 1;
      const like_count = imageDetail.value.counter?.like_count || 0;
      imageDetail.value.counter.like_count = isLike ? like_count - 1 : like_count + 1;
      bus.emit('detail:isLike', {
        feed_id,
        like_flag: imageDetail.value.like_flag,
        like_count: imageDetail.value.counter.like_count,
      });
      const params: commentParams = {
        feed_id,
        liked_uid: imageDetail.value.uid,
      };
      !isLikeState ? await CommentAPI.isLike(params) : await CommentAPI.unLike(params);
    } catch (e) {}
  };

  const goBack = () => {
    router.go(-1);
  };

  // 图片预览
  const showImg = (img: string[], index?: number) => {
    previewImg.value = {
      img,
      showPreview: true,
      initialIndex: index || 0,
    };
  };

  // 跳转个人中心
  const goProfile = () => {
    const { uid } = imageDetail.value?.user || {};
    router.push({ path: '/profile', query: { uid } });
  };

  const goShop = () => {
    window.location.href = imageDetail.value?.product?.url;
  };

  // 选中评论输入框
  const focusComment = () => {
    replyRef.value?.focusTextarea();
  };

  // 处理标签点击事件
  const handleTagClick = (tag: any) => {
    // 当tag_type=1时，跳转到活动详情页
    if (tag.tag_type === 1) {
      router.push({ path: '/contest/detail', query: { aid: tag.target_id } });
    } else {
      // 其他类型标签的处理逻辑（如有需要）
      console.log('点击了其他类型的标签:', tag);
    }
  };

  // 投票
  const handleVote = async (detail: any) => {
    // try {
    //   if (product.is_vote === 0) {
    //     const voteParams: any = {
    //       aid: item.aid,
    //       feed_id: product.feed_id,
    //     };
    //     // 投票
    //     await ActivityAPI.vote(voteParams);
    //     product.is_vote = 1;
    //     dialogStore.toggleVoteDialog(true);
    //   }
    // } catch (error) {
    //   console.error('Failed to vote:', error);
    // } finally {
    // }
  };
</script>

<style lang="scss" scoped>
  .detail_container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    .dialog_right {
      width: 24px;
      position: absolute;
      right: -45px;
      top: -30px;
    }
    .more_operation {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 24px;
      height: 24px;
      align-items: center;
      border-radius: 4px;
      gap: 2px;
    }
    .more_operation:hover {
      background: var(---3, #e1e2e3);
    }
    .text-container {
      display: flex;
      flex-direction: row;
      width: 100%; /* 文本容器宽度（按需调整） */
    }
    .text-content {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 默认显示 2 行 */
      transition: all 0.3s; /* 展开/折叠动画 */
    }
    /* 折叠箭头样式 */
    .toggle-btn {
      display: flex;
      flex-direction: column-reverse;
    }
    .infinite-list {
      flex-grow: 1;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .img_title {
      color: var(---9, #222);

      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 150%; /* 30px */
    }

    .cursor_poi {
      cursor: pointer;
    }

    .close {
      display: flex;
      flex-direction: row-reverse;
      padding: 20px 41px;
      cursor: pointer;
    }
  }
  .operation_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(---9, #0a0a0a);
    font-family: 'HarmonyOS Sans';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 6px;
    cursor: pointer;
  }
  .operation_item:hover {
    color: #f76b1b;
  }
  .content {
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 40px 260px 80px 260px;
    border-radius: 12px 12px 0 0;
    .show_more_text {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: var(---9, #222);
      font-size: 14px;
      line-height: normal;
      margin-top: 6px;
    }

    .reply_view {
      background: #f8f8f8;
      border-radius: 8px;
      padding: 8px;
    }

    .comment_view {
      padding-left: 28px;
      font-size: 14px;
      line-height: 21px;
    }
    .comment_view_text {
      width: 100%;
      max-width: 600px;
      /* 核心：允许长单词/URL 换行到下一行 */
      overflow-wrap: break-word; /* 现代浏览器推荐，替代 word-wrap */
      /* 可选：控制中日韩文字换行规则（默认 normal 即可） */
      word-break: normal; /* 仅在单词边界换行 */
    }
    .comment_img_list {
      display: flex;
      flex-direction: row;
      padding: 10px 0;
      .comment_img_view {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        border-radius: 8px;
        overflow: hidden;
      }
      .comment_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .comment_time {
      color: #7a7a7a;
      font-weight: 400;
      font-size: 14px;
    }

    .reply_btn {
      color: #222;
      font-size: 14px;
    }

    .user_info {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .user_avt {
      border-radius: 56px;
      width: 24px;
      height: 24px;
    }

    .user_name {
      color: #7a7a7a;
      font-size: 15px;
      font-weight: 500;
    }
    .detail_view {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .icon_view {
      border-radius: 8px;
      background: #f8f8f8;
      padding: 12px 16px;
    }

    .icon_list {
      display: flex;
      flex-direction: row;
      color: #222;
      font-size: 16px;
      font-weight: 500;
    }

    .line {
      display: inline-block;
      background-image: linear-gradient(to right, #cbcbcb, #cbcbcb);
      background-size: 100% 2px;
      background-position: bottom;
      background-repeat: no-repeat;
    }
    .left {
      width: 56%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .left_img_view {
        flex-grow: 1;
        //background: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
      }
      .img_big {
        border-radius: 8px;
        display: block;
      }
      .price_view {
        width: 100%;
        height: 152px;
        min-height: 152px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        .price_num {
          border-radius: 8px;
          background: var(---1, #f8f8f8);
          padding: 16px 24px;
          color: var(---9, #222);

          font-size: 32px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .fs_22 {
            font-size: 22px;
            margin-top: 6px;
          }
        }
        .price_btn {
          margin-left: 96px;
          display: flex;
          width: 200px;
          height: 40px;
          padding: 4px 10px;
          justify-content: center;
          align-items: center;
          gap: 8px;
          flex-shrink: 0;
          color: var(---0, #fff);

          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          border-radius: 8px;
          background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
          backdrop-filter: blur(2px);
        }
      }
    }
    .right {
      width: 44%;
      display: flex;
      flex-direction: column;
      height: 100%;
      .name {
        color: #222;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
        flex: 0 0 auto;
      }

      .name_des {
        color: #7a7a7a;
        font-size: 16px;
        line-height: 24px;
      }
    }

    .buy_view {
      border-radius: 8px;
      background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
      backdrop-filter: blur(2px);
      display: flex;
      flex-direction: row;
      color: var(---0, #fff);
      font-size: 18px;
      font-weight: 500;
      padding: 8px 30px;
    }

    .flex_row_no_s {
      display: flex;
      flex-direction: row;
    }

    .flex_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .w_100 {
      width: 100%;
    }

    .title_view {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
    }

    .title {
      margin-left: 16px;
      max-width: 640px;
      color: #222;
      text-overflow: ellipsis;
      font-size: 20px;
      font-weight: 600;
    }

    .img_avt {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
      border-radius: 56px;
    }
    .cancal_follow {
      background: #fbe6db;
      margin-left: 16px;
      border-radius: 8px;
      padding: 10px 0;
      width: 120px;
      color: var(---0, #f76b1b);
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .follow {
      background: #f76b1b;
      margin-left: 16px;
      border-radius: 8px;
      padding: 10px 0;
      width: 120px;
      color: var(---0, #fff);
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .report_view_dialog {
    position: relative;
  }
  .input_dialog {
    color: var(---9, #222);
    font-family: 'Inter Tight';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .waring_img {
    margin: 0 auto;
  }
  .cancle_btn {
    border-radius: 8px;
    background: var(---2, #ededed);
    backdrop-filter: blur(2px);
    display: flex;
    height: 48px;
    width: 248px;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .confirm_btn {
    display: flex;
    height: 48px;
    width: 248px;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
    backdrop-filter: blur(2px);
    color: var(---0, #fff);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .flex_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .active_item_label {
    color: var(---, #f76b1b);
    font-family: 'Inter Tight';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .item_label {
    color: var(---, #0a0a0a);
    font-family: 'Inter Tight';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  /* WebKit 内核浏览器（Chrome/Edge/Safari）滚动条样式 */
  /* 滚动条整体宽度 */
  ::v-deep .reportInfo-scrollbar-textarea .el-textarea__inner::-webkit-scrollbar {
    width: 6px; /* 垂直滚动条宽度 */
    height: 6px; /* 水平滚动条高度（如需） */
  }
  /* 滚动条轨道 */
  ::v-deep .reportInfo-scrollbar-textarea .el-textarea__inner::-webkit-scrollbar-track {
    background: #f5f5f5; /* 轨道背景色 */
    border-radius: 3px; /* 轨道圆角 */
  }
  /* 滚动条滑块（未 hover 时） */
  ::v-deep .reportInfo-scrollbar-textarea .el-textarea__inner::-webkit-scrollbar-thumb {
    background: #ccc; /* 滑块颜色 */
    border-radius: 3px; /* 滑块圆角 */
  }
  /* 滚动条滑块（hover 时） */
  ::v-deep .reportInfo-scrollbar-textarea .el-textarea__inner::-webkit-scrollbar-thumb:hover {
    background: #999; /* 滑块 hover 颜色 */
  }
  /* 滚动条角落（垂直+水平滚动条交汇处） */
  ::v-deep .reportInfo-scrollbar-textarea .el-textarea__inner::-webkit-scrollbar-corner {
    background: #f5f5f5; /* 角落背景色 */
  }
  .animating {
    animation: pulse 0.3s ease-out;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    } /* 中间状态放大到1.2倍 */
    100% {
      transform: scale(1);
    }
  }
</style>
